<template>
	<view class="container">
		<view class="money-transfer-wrapper flex justify-between align-center">
			<text class="label">省心投｜稳中求胜策略</text>
		</view>
		<view class="transfer-form-wrapper">
			<view class="title-wrapper flex align-center">
				<text class="title">转入资产比例（元）</text>
			</view>
			<view class="transfer-input-wrapper flex align-end">
				<text class="unit">￥</text>
				<u-input class="input" v-model="value" type="digit" />
			</view>
			<view class="transfer-list flex">
				<text class="transfer-item" v-for="(item,index) in transferList" :class="transferIndex==index?'transfer-item-active':''" @tap="select(index)">
					{{item}}
				</text>
			</view>
			<view class="tip">
				现在转入7月25日确认份额，发放收益
			</view>
		</view>
		<view class="pay-method flex justify-between align-center">
			<text class="pay-label">付款方式</text>
			<view class="arrow-right"></view>
		</view>
		<view class="common-btn submit-btn" @tap="submit">确定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{},
				value:"",
				transferList:[5000,6000,8000],
				transferIndex:-1
			};
		},
		methods:{
			select(index){
				if(this.transferIndex==index){
					return false
				}
				this.transferIndex=index
				this.value=this.transferList[index]
			},
			async submit(){
				if(!this.value){
					uni.showToast({
						icon:"none",
						title:"请输入金额"
					})
					return
				}
				try{
					await this.$u.api.transferInApi({num:this.value,id:this.info.list[0].id})
					uni.showToast({
						icon:"success",
						title:"转入成功"
					})
				}catch(e){
					//TODO handle the exception
				}
			}
		},
		async onLoad() {
			try {
				this.info = await this.$u.api.getOnWorryInfoApi()
			} catch (e) {
				//TODO handle the exception
			}
		}
	}
</script>

<style lang="scss">
.container{
	padding-top: 20rpx;
	.money-transfer-wrapper{
		padding: 0 30rpx;
		height: 96rpx;
		background: #FFFFFF;
		.label{
			font-size: 30rpx;
			color: #333333;
		}
		.money-transfer-value{
			font-size: 30rpx;
			color: #333333;
		}
	}
	.transfer-form-wrapper{
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #fff;
		.title-wrapper{
			.title{
				font-size: 30rpx;
				color: #333333;
			}
			.info-icon{
				width: 32rpx;
				height: 32rpx;
				background: url("~@/static/images/moneyTransfer/info-icon.png");
				background-size: 100% 100%;
			}
		}
		.transfer-input-wrapper{
			padding: 30rpx 0 18rpx 0;
			border-bottom: 2rpx solid #F0F8FF;
			.unit{
				margin-right: 10rpx;
				font-size: 26rpx;
				color: #333333;
				line-height: 70rpx;
			}
			.input{
				flex:1;
				font-size: 50rpx;
				font-weight: 500;
				color: #333333;
			}
			.close-icon{
				width: 48rpx;
				height: 48rpx;
				background: url("~@/static/images/moneyTransfer/close-icon.png");
				background-size: 100% 100%;
			}
		}
	}
	.transfer-list{
		margin-top: 20rpx;
		.transfer-item{
			margin-right: 36rpx;
			width: 100rpx;
			height: 54rpx;
			background: #F5F5F5;
			border-radius: 4rpx;
			font-size: 24rpx;
			color: #333333;
			line-height: 54rpx;
			text-align: center;
		}
		.transfer-item-active{
			background: #E7F1FF;
			color: $color-blue;
		}
	}
	.tip{
		font-size: 26rpx;
		margin-top: 20rpx;
		color: #999999;
	}
	.pay-method{
		padding: 0 24rpx;
		margin-top: 20rpx;
		height: 96rpx;
		background: #FFFFFF;
		.pay-label{
			font-size: 30rpx;
			color: #333333;
		}
		.arrow-right{
			width: 40rpx;
			height: 40rpx;
			background: url("~@/static/images/moneyCharge/arrow-icon.png");
			background-size: 100% 100%;
		}
	}
	.submit-btn{
		margin: 60rpx 30rpx;
	}
}
</style>
